<script setup>
import {inject, reactive, ref} from "vue";
import {ElMessage} from "element-plus";
import router from "@/router/index.js";

const $http = inject("$axios");

const user = reactive({
  userId:"",
  name:"",
  password:"",
  sex:"",
  age:"",
  phone:"",
  email:"",
  job:""
});
//设定输入规则
const rules = reactive({
  userId: [
    { required: true, message: '请首先输入用户名', trigger: 'blur' },
  ],
  password: [
    {
      required: true,
      message: '请首先输入密码',
      trigger: 'blur',
    }
  ],
});

function FunctionForm() {
  router.push('/function');
}

const push = function() {
  console.log(user); // 打印 user 对象，user 应该是在外部定义的全局变量或者在函数内部定义的局部变量

  // 使用 fetch 发送 PUT 请求到 '/student/update' 路径
  fetch('http://localhost:8088/api/user/updateUser', {
    method: 'PUT', // 指定请求方法为 PUT
    headers: { // 设置请求头
      'Content-Type': 'application/json', // 指定发送的数据类型为 JSON
    },
    body: JSON.stringify(user), // 将 user 对象转换为 JSON 字符串作为请求体
  })
      .then(response => response.json()) // 将响应体转换为 JSON 对象
      .then(data => { // 当响应体转换成功时执行
        ElMessage({ // 使用 Element UI 的 ElMessage 组件显示成功消息
          message: '修改成功！！！',
          type: 'success',
        });
        router.push('/function'); // 使用 Vue Router 的 push 方法跳转到 '/function' 路径
      })
      .catch(error => { // 捕获请求过程中的任何错误
        console.error('修改失败：', error); // 在控制台打印错误信息
        ElMessage({ // 使用 Element UI 的 ElMessage 组件显示错误消息
          message: '修改失败：' + error.message,
          type: 'error',
        });
      });
};
</script>

<template>
  <div class="register">
    <el-form :model="user" :rules="rules" label-width="auto">
      <el-form-item label="用户名" prop="userId">
        <el-input v-model="user.userId" placeholder="请输入你的用户名"/>
      </el-form-item>
      <el-form-item label="姓名">
        <el-input v-model="user.name" placeholder="请输入你的姓名"/>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-model="user.password" placeholder="请输入你的密码" type="password" autocomplete="off"/>
      </el-form-item>
      <el-form-item label="性别">
        <el-input v-model="user.sex" placeholder="请输入你的性别,false为女性，true为男性"/>
      </el-form-item>
      <el-form-item label="年龄">
        <el-input v-model="user.age" placeholder="请输入你的年龄"/>
      </el-form-item>
      <el-form-item label="电话">
        <el-input v-model="user.phone" placeholder="请输入你的电话"/>
      </el-form-item>
      <el-form-item label="邮箱">
        <el-input v-model="user.email" placeholder="请输入你的邮箱"/>
      </el-form-item>
      <el-form-item label="职位">
        <el-input v-model="user.job" placeholder="请输入你的职位"/>
      </el-form-item>
    </el-form>
    <el-button type="primary" @click="push">提交</el-button>
    <el-button type="primary" @click="FunctionForm">返回用户管理页面</el-button>
  </div>
</template>

<style scoped>

</style>